{% load staticfiles %}

<div id="header" class="navbar navbar-inverse navbar-fixed-top">
    <!-- BEGIN TOP NAVIGATION BAR -->
    <div class="navbar-inner">
        <div class="container-fluid">
            <!-- BEGIN LOGO -->
            <a class="brand" href="index.html">
                Containers
            </a>
            <!-- END LOGO -->
            <!-- BEGIN RESPONSIVE MENU TOGGLER -->
            <a class="btn btn-navbar collapsed" id="main_menu_trigger" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="arrow"></span>
            </a>          
            <!-- END RESPONSIVE MENU TOGGLER -->                
            <div class="top-nav">
                <!-- BEGIN QUICK SEARCH FORM -->
                <form class="navbar-search hidden-phone">
                    <div class="search-input-icon">
                        <input type="text" class="search-query dropdown-toggle" id="quick_search" placeholder="Search" data-toggle="dropdown" />
                        <i class="icon-search"></i>
                        <!-- BEGIN QUICK SEARCH RESULT PREVIEW -->
                        <ul class="dropdown-menu extended">
                            <li>
                                <span class="arrow"></span>
                                <p>Found 23 results</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success"><i class="icon-user"></i></span>
                                    Nick Kim, Technical Mana...<i class="icon icon-arrow-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-info"><i class="icon-money"></i></span>
                                    Anual Report,Dec 20...<i class="icon icon-arrow-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    See all results...
                                </a>
                            </li>
                        </ul>
                        <!-- END QUICK SEARCH RESULT PREVIEW -->
                    </div>
                </form>
                <!-- END QUICK SEARCH FORM -->
                <!-- BEGIN TOP NAVIGATION MENU -->                  
                <ul class="nav pull-right" id="top_menu">
                    <li class="divider-vertical hidden-phone hidden-tablet"></li>
                    <!-- BEGIN USER LOGIN DROPDOWN -->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-wrench"></i>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="icon-cogs"></i> System Settings</a></li>
                            <li><a href="#"><i class="icon-pushpin"></i> Shortcuts</a></li>
                            <li><a href="#"><i class="icon-trash"></i> Trash</a></li>
                        </ul>
                    </li>
                    <!-- END USER LOGIN DROPDOWN -->
                    <li class="divider-vertical hidden-phone hidden-tablet"></li>
                    <!-- BEGIN USER LOGIN DROPDOWN -->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-user"></i>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="icon-user"></i> Administrator</a></li>
                            <li><a href="#"><i class="icon-envelope-alt"></i> Inbox</a></li>
                            <li><a href="#"><i class="icon-tasks"></i> Tasks</a></li>
                            <li><a href="#"><i class="icon-ok"></i> Calendar</a></li>
                            <li class="divider"></li>
                            <li><a href="login.html"><i class="icon-key"></i> Log Out</a></li>
                        </ul>
                    </li>
                    <!-- END USER LOGIN DROPDOWN -->
                </ul>
                <!-- END TOP NAVIGATION MENU -->    
            </div>
        </div>
    </div>
    <!-- END TOP NAVIGATION BAR -->
</div>